<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/taglibs.jsp" %>
<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">

    <!--公共样式-->
    <link rel="stylesheet" href="${ctx}/resources/appCalendar/css/reset.css" />
    <!--主要样式-->
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/appCalendar/css/simple-calendar.css">
    <link rel="stylesheet" href="${ctx}/resources/appCalendar/css/calendar.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}/resources/appCalendar/css/jquery.my-modal.1.1.winStyle.css" />


    <title>顾问开放预约时间</title>
</head>
<body>
<div class="inner">
    <div id='calendar' class="sc-calendar">
        <div class="sc-header">
            <div class="sc-title">
                <div class="year"><span class="sc-select-year" name=""></span>年</div>

                <div class="month">
                    <div class="arrow sc-mleft"></div>
                    <div class="monthdiv">
                        <span class="sc-select-month" name=""></span>
                    </div>
                    <div class="arrow sc-mright"></div>
                </div>
            </div>
            <div class="sc-week"></div>
        </div>
        <div class="sc-body">
            <div class="sc-days"></div>
        </div>
    </div>
    <div class="announcement">
        <ul class="matter">
        </ul>
    </div>


</div>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="${ctx}/resources/appCalendar/js/jquery.min.js" ></script>
<script type="text/javascript" src="${ctx}/resources/appCalendar/js/simple-calendar.js"></script>
<script type="text/javascript" src="${ctx}/resources/appCalendar/js/hammer-2.0.8-min.js"></script>
<script src="${ctx}/resources/jweixin-1.0.0.js"></script>
<script src="${ctx}/resources/semanticui/jquery-2.1.4.min.js"></script>
<script src="${ctx}/resources/semanticui/semantic.js"type="text/javascript"></script>
<script type="text/javascript">
    var myCalendar = new SimpleCalendar('#calendar');
    var currentDate;
    var flag = true;
    $(document).ready(function(){
        $(".sc-mleft").click(function(){
            myCalendar.subMonth();
            var year = $('.sc-select-year').text();
            var monthCH = $('.sc-select-month').text();
            var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH)+1;
        })
        $(".sc-mright").click(function(){
            myCalendar.addMonth();
            var year = $('.sc-select-year').text();
            var monthCH = $('.sc-select-month').text();
            var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH)+1;
        })

    });


    //滑动切换
    var myElement = document.getElementById('calendar');
    var hammer = new Hammer(myElement);
    hammer.on("swipeleft", function (ev) {
        myCalendar.addMonth();
    });
    hammer.on("swiperight", function (ev) {
        myCalendar.subMonth();
    });

    //显示当天的活动在初始化mark之后
    //初始化今天的活动
    announceList($('.sc-today'));
    //有标记的日期点击事件
    $('#calendar').on("click", '.sc-selected', function() {

        announceList($(this));
    });

    //显示选择日期当天的活动
    function announceList(v){
        //显示选择日期当天的活动
        console.log(v)


        if(flag){
            initData();
        }
        if (!v.hasClass('sc-active-day')){
            v.addClass('sc-active-day')
        }
        var year = $('.sc-select-year').text();
        var monthCH = $('.sc-select-month').text();
        var day = v.children()[1].innerText;
        var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH) + 1;
        var date = year + '-' + month + '-' + day;
        currentDate = date;
        if(v.children().hasClass('sc-mark-show')) {
            var content = myCalendar._defaultOptions.mark[date];
            var matterHtml = '';
            if (content != undefined) {
                for (var i = 0; i < content.length; i++) {
                    matterHtml += '<li class="announceItem">'
                        + '<div>'
                            + '<div class="fl announceImg">'
                                + '<img class=" " src="${ctx}/resources/appCalendar/images/content.png">'
                            +'</div>'
                            + '<div >'
                                + '<a href="${ctx}/wechat/hunter/myCalendar/calendarForm.page?dateTime='+date+'&id='+content[i].id + '">'
                                    + '<p class="announceContent">'
                                        + content[i].title
                                    + '</p>'
                                + '</a>'
                                + '<a href="${ctx}/wechat/hunter/myCalendar/del?id='+content[i].id + '">'
                                    + '<span style="color:#FF0000;text-align:right;display:block">删除</span>'
                                + '</a>'
                           + '</div>'
                        + '</div>'
                        + '<div class="announceTime">' + content[i].starttime + ' - ' + content[i].endtime + '</div>'

                        + '</li>';
                }
            }
        }else{
            var matterHtml=''
            matterHtml +='<li class="announceItem"><div><p class="announceContent">当前日期暂无活动</p></div></li>';
            $('.matter').html(matterHtml);
        }
        matterHtml += '<button onclick="addEvent()">开放预约时间</button>'
        $('.matter').html(matterHtml);
    }

    function initData(){
        var year = $('.sc-select-year').text();
        var monthCH = $('.sc-select-month').text();
        var month =  SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH)+1;
        var date = year+"-"+month;
        $.ajax({
            url: '${ctx}/wechat/hunter/myCalendar/get?dateTime='+date,
            type: 'GET',
            async: false,
            success: function (data){
                flag = false;
                myCalendar._defaultOptions.mark = data;
                myCalendar.update();
            }
        })
    }

    function  addEvent(){
        top.location="${ctx}/wechat/hunter/myCalendar/calendarForm.page?dateTime="+currentDate;

    }

</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

</div>
</body>
</html>